<template>
  <div>
    <!-- 新增全勤奖规则 -->
    <div>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span class="span1">新增全勤奖规则</span>
        </div>
        <div class="text item1">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="方案名称：" prop="name">
              <el-input v-model="ruleForm.name" class="input1"></el-input>
              <el-checkbox
                label="默认"
                name="type"
                style="margin-left: 20px"
              ></el-checkbox>
            </el-form-item>
            <el-form-item label="状态：" prop="delivery">
              <el-switch v-model="ruleForm.delivery"></el-switch>
            </el-form-item>
            <el-form-item label="发放规则：" prop="deliverys">
              <el-switch v-model="ruleForm.deliverys"></el-switch>
            </el-form-item>
            <!-- 如果发放规则为false -->
            <div
              v-if="ruleForm.deliverys === false"
              style="margin-bottom: 30px"
            >
              <span style="margin-left: 100px">全员享受优惠</span>
            </div>
            <!-- 如果发放规则为true -->
            <div
              v-if="ruleForm.deliverys === true"
              style="margin-bottom: 30px; margin-left: 100px; font-size: 15px"
            >
              <div style="margin-bottom: 20px">
                满足一下条件的人员可享受全勤奖
              </div>
              <div style="margin-bottom: 20px">
                <span>员工状态:</span>
                <span style="margin-left: 30px"
                  ><input type="checkbox" style="margin-right: 5px" />试用</span
                >
                <span style="margin-left: 50px"
                  ><input type="checkbox" style="margin-right: 5px" />正式</span
                >
              </div>
              <div>
                <span>工作性质:</span>
                <span style="margin-left: 30px"
                  ><input type="checkbox" style="margin-right: 5px" />全职</span
                >
                <span style="margin-left: 50px"
                  ><input type="checkbox" style="margin-right: 5px" />兼职</span
                >
                <span style="margin-left: 50px"
                  ><input
                    type="checkbox"
                    style="margin-right: 5px"
                  />实习生</span
                >
                <span style="margin-left: 50px"
                  ><input
                    type="checkbox"
                    style="margin-right: 5px"
                  />劳务派遣</span
                >
                <span style="margin-left: 50px"
                  ><input type="checkbox" style="margin-right: 5px" />外包</span
                >
              </div>
            </div>
            <el-form-item label="扣款规则:" prop="deliverys1">
              <el-switch v-model="ruleForm.deliverys1"></el-switch>
            </el-form-item>
            <!-- 扣款规则为false -->
            <div
              v-if="ruleForm.deliverys1 === false"
              style="margin-bottom: 30px; margin-left: 100px; font-size: 15px"
            >
              <span>全员发放全勤奖</span>
            </div>
            <!-- 扣款规则为true -->
            <div
              v-if="ruleForm.deliverys1 === true"
              style="margin-bottom: 30px; margin-left: 100px; font-size: 15px"
            >
              <div style="margin-bottom: 20px">
                发生以下任意情况，扣发全勤奖：
              </div>
              <div style="margin-bottom: 20px">
                <input type="checkbox" v-model="checkboxa" /><span
                  style="margin-left: 10px"
                  @click="checkall()"
                  >全选</span
                >
              </div>
              <div>
                <span
                  ><input
                    type="checkbox"
                    style="margin-right: 10px"
                    v-model="checkbox1.checkbox2"
                  />迟到早退</span
                >
                <span style="margin-left: 50px"
                  ><input
                    type="checkbox"
                    style="margin-right: 10px"
                    v-model="checkbox1.checkbox3"
                  />缺勤</span
                >
                <span style="margin-left: 50px">
                  <input
                    type="checkbox"
                    style="margin-right: 10px"
                    v-model="checkbox1.checkbox4"
                  />年假
                </span>
                <span style="margin-left: 50px"
                  ><input
                    type="checkbox"
                    style="margin-right: 10px"
                    v-model="checkbox1.checkbox5"
                  />调休</span
                >
                <span style="margin-left: 50px"
                  ><input
                    type="checkbox"
                    style="margin-right: 10px"
                    v-model="checkbox1.checkbox6"
                  />事假</span
                >
                <span style="margin-left: 50px"
                  ><input
                    type="checkbox"
                    style="margin-right: 10px"
                    v-model="checkbox1.checkbox7"
                  />安假</span
                >
                <span style="margin-left: 50px"
                  ><input
                    type="checkbox"
                    style="margin-right: 10px"
                    v-model="checkbox1.checkbox8"
                  />探亲假</span
                >
                <span style="margin-left: 50px"
                  ><input
                    type="checkbox"
                    style="margin-right: 10px"
                    v-model="checkbox1.checkbox9"
                  />哺乳假</span
                ><br />
                <span
                  ><input
                    type="checkbox"
                    style="margin-right: 10px"
                    v-model="checkbox1.checkbox10"
                  />产假</span
                >
                <span style="margin-left: 80px"
                  ><input
                    type="checkbox"
                    style="margin-right: 10px"
                    v-model="checkbox1.checkbox11"
                  />其他假期</span
                >
                <span style="margin-left: 20px"
                  ><input
                    type="checkbox"
                    style="margin-right: 10px"
                    v-model="checkbox1.checkbox12"
                  />育儿假</span
                >
                <span style="margin-left: 35px"
                  ><input
                    type="checkbox"
                    style="margin-right: 10px"
                    v-model="checkbox1.checkbox13"
                  />陪产假</span
                >
                <span style="margin-left: 35px"
                  ><input
                    type="checkbox"
                    style="margin-right: 10px"
                    v-model="checkbox1.checkbox14"
                  />产检假</span
                >
                <span style="margin-left: 35px"
                  ><input
                    type="checkbox"
                    style="margin-right: 10px"
                    v-model="checkbox1.checkbox15"
                  />病假</span
                >
              </div>
            </div>
            <el-form-item label="备注：" v-if="ruleForm.deliverys1 === true">
              <el-input
                type="textarea"
                :autosize="{ minRows: 5, maxRows: 10 }"
                placeholder="请输入内容"
                v-model="textarea2"
                class="input2"
              >
              </el-input>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>
    <!-- 底部栏 -->
    <div class="bottom">
      <el-card class="box-card1">
        <el-button plain @click="$router.push('/home/encourage')"
          >返回</el-button
        >
        <el-button plain>取消</el-button>
        <el-button type="primary" plain>保存</el-button>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //新增假期计薪规则
      ruleForm: {
        name: "",
        delivery: true,
        //发放规则
        deliverys: true,
        //扣款规则
        deliverys1: true,
      },
      //新增假期计薪规则输入的规范
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
      //新增假期计薪规则的多行文本框
      textarea2: "",
      //多选框
      checkboxa: false,
      checkbox1: {
        checkbox2: false,
        checkbox3: false,
        checkbox4: false,
        checkbox5: false,
        checkbox6: false,
        checkbox7: false,
        checkbox8: false,
        checkbox9: false,
        checkbox10: false,
        checkbox11: false,
        checkbox12: false,
        checkbox13: false,
        checkbox14: false,
        checkbox15: false,
      },
    };
  },
  methods: {
    checkall() {
      // if()
    },
  },
};
</script>

<style scoped>
.span1 {
  font-size: 18px;
  font-weight: bold;
}
.box-card {
  width: 80%;
}
.input1 {
  width: 450px;
  height: 35px;
}
.bottom {
  position: fixed;
  bottom: 0;
  width: 100%;
  margin-left: -20px;
}
</style>